<template>
    <div class="image_list">
        <div
            v-for="(item, index) in imgList"
            :key="index"
            class="item_box"
            :class="{ icon_radar: item.is_radar == 1 }"
            @click="chooseImage(item, index)">
            <el-image :src="item.thumbnail_url" fit="cover" class="image"></el-image>
            <el-tooltip :content="item?.file_name" :disabled="disabled" effect="light" placement="top">
                <div class="item_title" @mouseenter="handleMouse($event)">{{ item?.file_name }}</div>
            </el-tooltip>
            <div class="icon_box">
                <img v-if="item.isCheck" src="@/assets/image/friendcirclemat/image_choose.png" alt="" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { defineEmits, defineExpose, defineProps, watch } from 'vue';
import { isTextBeyond } from '@/utils/utils';
const emit = defineEmits(['getData']);
const props = defineProps(['pageData', 'chooseData', 'singleImage', 'baseNum']);
const imgList = ref([]);
const chooseImageArr = reactive({ data: JSON.parse(JSON.stringify(props.chooseData)) });

const disabled = ref(true);
const handleMouse = (e: any) => {
    disabled.value = isTextBeyond(e);
};

watch(
    () => props.pageData,
    val => {
        const arr: Array<any> = [];
        if (val.length > 0) {
            val.forEach((item: any) => {
                item.isCheck = false;
                arr.push(item);
            });
        }
        imgList.value = arr;
    }
);
watch(
    () => props.chooseData,
    val => {
        chooseImageArr.data = JSON.parse(JSON.stringify(val));
    }
);

const chooseImage = (item: any) => {
    // 只能选择一张

    if (props.singleImage == false) {
        imgList.value.map((v: any) => {
            v.isCheck = false;
            if (v.id === item.id) {
                v.isCheck = true;
            }
        });
        const singleData = imgList.value.filter((item: any) => item.isCheck);
        chooseImageArr.data = singleData;
    } else {
        if (props.baseNum == 0) {
            ElMessage.warning('选择素材量已超出规定数量');
            return;
        }
        const indx = chooseImageArr.data.findIndex(it => {
            return it.id === item.id;
        });
        if (indx === -1) {
            if (chooseImageArr.data.length >= 9) {
                ElMessage.error('最多可选9张');
                return;
            }
            item.isCheck = true;
            item.is_local = 0;
            chooseImageArr.data.push(item);
        } else {
            chooseImageArr.data.splice(indx, 1);
            item.isCheck = false;
        }
    }

    emit('getData', {
        type: 'image',
        data: chooseImageArr.data
    });
};
const getList = () => {};

defineExpose({ getList });
</script>

<style lang="scss" scoped>
.image_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .item_box {
        width: 110px;
        margin-right: 11px;
        margin-bottom: 12px;
        position: relative;

        .image {
            width: 100%;
            height: 110px;
        }

        .icon_box {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 6px;
            left: 6px;
            background: white;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .item_title {
            cursor: pointer;
            font-size: 14px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .icon_radar {
        position: relative;

        &::after {
            content: '';
            width: 20px;
            height: 20px;
            background: url('@/assets/image/material/radar_red.png') no-repeat center;
            background-size: cover;
            position: absolute;
            top: 3px;
            left: 85px;
        }
    }

    .item_box:nth-child(5n) {
        margin-right: 0;
    }
}
</style>
